<?php
include_once 'header.php';
?>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<h1>微信公众号用户总数 在线图表</h1>
<table>
    <tr>
        <td>Date: <input type="text" id="datepicker" name="datepicker"></td>
        <!--<td><div id="datepicker"></div></td>-->
        <!--<td><input type="text" id="alternate" size="30"/></td>-->
        <!--<td><input type="submit" name="submit" value="Submit"></td>-->
        <td><button>提交</button></td>
    </tr>
</table>        
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 参考：http://www.cnblogs.com/qjqcs/p/5852958.html
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 获取日期
    $(function () {
        $("#datepicker").datepicker({
            altField: "#alternate",
            altFormat: "yy-mm-dd",
//                    showButtonPanel: true,
            changeMonth: true,
            changeYear: true,
            yearRange: "-1:+0",
            monthRange: "-500:-1",
            dateFormat: "yy-mm-dd",
        }
        );
    });
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption({
        title: {
            text: '微信公众号用户总数',
            subtext: '每日累计用户数（单位：个）',
            left: 'center' //标题居中 
        },
        tooltip: {},
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false}, //  数据视图
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true}, //  刷新
                saveAsImage: {show: true}, //  下载为图片
                right: '5%',
            }
        },
        legend: {
            data: ['ref_date']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        dataZoom: [
            {
                id: 'dataZoomX',
                type: 'slider',
                xAxisIndex: [0],
                filterMode: 'filter', // 设定为 'filter' 从而 X 的窗口变化会影响 Y 的范围。
                start: 80,
                end: 100
            },
        ],
        series: [
            {
                "name": "cumulate_user",
                "type": "bar",
                "data": []
            }
        ]
    });
    function getDate() {
        var datein = $("input[name=datepicker]").val();
        if (datein) {
            return datein;
        }
    }
    var arr1 = [], arr2 = [];
    function jsonData() {
        $.ajax({
            type: "post",
            async: false, // false为同步执行，true为异步执行
            url: "user_cumulate.php",
            data: {num: '100'},
            dataType: "json",
            success: function (result) {
                if (result) {
                    arr1 = result.ref_date;
                    arr2 = result.cumulate_user;
                }
                return arr1, arr2;
            }
        })
    }
    jsonData();
    // 填入数据
    myChart.setOption({
        xAxis: {
            data: arr1
        },
        series: [{
                // 根据名字对应到相应的系列
                name: '用户数',
                data: arr2,
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
            }]
    });

</script>    
<?php
include_once 'header.php';
?>